<template>
  <div class="page-container">
    <el-card class="box-card">
      <el-row>
      </el-row>
      <div class="table-box">
        <el-table :data="tableList" size="small" class="table-box" :header-cell-style="{textAlign: 'center'}" :cell-style="{textAlign: 'center'}">
          <el-table-column prop="name" label="供应商名称"/>
          <el-table-column prop="productInfo" label="产品信息"/>
          <el-table-column prop="contacts" label="联系人"/>
          <el-table-column prop="contactWay" label="联系方式"/>
          <el-table-column label="操作" >
            <template v-slot="{row}">
              <el-button size="small" type="text" icon="ele-View" @click="skip('quotation',row.id)">查看报价单</el-button>
              <el-button size="small" type="text" icon="ele-ChatLineRound" @click="addFriend(row)">17聊</el-button>
              <el-button size="small" type="text" icon="ele-CirclePlusFilled" @click="addList(row)">添加到列表</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page-block">
          <el-pagination
              v-model:currentPage="params.current"
              v-model:page-size="params.size"
              :page-sizes="[10, 20, 30, 40]"
              :small="true"
              :disabled="false"
              :background="false"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              :hide-on-single-page="true"
              @size-change="sizeChange"
              @current-change="getTableList"
          />
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import {reactive, toRefs, onMounted} from 'vue'
import {useRouter} from "vue-router/dist/vue-router";

export default {
  name: "index",
  setup() {
    const router = useRouter()
    const state = reactive({
      tableList:[
        {
          id:0,
          name:"name",
          productInfo:"产品信息",
          contacts:"阿米尔汗",
          contactWay:"020-12580"
        }
      ],
      params: {
        current: 1,
        size: 10,
      },
      total: 0,

    })

    //页码
    const sizeChange = (size) => {
      state.params.size = size
      state.params.current = 1
      getTableList()
    }

    //获取数据
    const getTableList = () => {

    }

    //跳转
    const skip = (name,id) => {
      router.push({name: name,query:{id:id}})
    }

    //17聊添加好友
    const addFriend = (row) => {

    }

    //添加到列表
    const addList = (row) => {

    }

    onMounted(() => {

    })
    return{
      ...toRefs(state),
      sizeChange,
      getTableList,
      skip,
      addFriend,
      addList,

    }

  }
}
</script>

<style lang="scss" scoped>
.page-container {
  .table-box {
    background: #fff;
    margin-top: 10px;

    :deep(.el-table__header-wrapper .el-table__cell) {
      background: var(--el-color-primary-light-9);
      color: var(--next-bg-menuBar-light-1);
    }

    :deep(thead .cell) {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    :deep(thead .el-icon) {
      margin-top: -2px;
      cursor: pointer;
    }

    .primary {
      cursor: pointer;
      color: var(--el-color-primary);
    }

  }
}
</style>
